<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 35%;">
                  <el-select v-model="searchInfo.district" @change="changeDistrict(searchInfo.district)" :disabled="$store.state.userInfo.regionId?true:false" size="mini"
                             clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="searchRowsInfo(true)" size="mini" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">区域编码:</span>
                <span class="searchInputFont">
                    <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.areaNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="区域编码"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">创建时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     style="width: 100%;"
                     v-model="value6"
                     type="daterange"
                     align="left"
                     @change="searchRowsInfo()"
                     placeholder="选择日期范围"
                     size="mini"
                     :picker-options="$store.state.pickerOptions2">
                    </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;display: flex">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
              <!--<el-button type="primary" size="mini" @click="exportInfo()">导出</el-button>-->
              <router-link v-if="$store.state.btnMenuIds.indexOf(323)>-1" style="margin-left: 10px;" to="/parking/add">
                <el-button  type="primary" size="mini" >新增</el-button>
              </router-link>
              <el-upload
                class="upload-demo"
                v-if="$store.state.btnMenuIds.indexOf(325)>-1"
                action=""
                :limit="1"
                style="margin-left: 10px"
                :on-change="handleFileChange"
                :auto-upload="false"
                :show-file-list="false"
                >
                <el-button size="small" type="primary">数据导入</el-button>
              </el-upload>
              <el-button size="small" v-if="$store.state.btnMenuIds.indexOf(331)>-1" v-loading="btnLoading"   style="margin-left: 10px" type="primary" @click="dataExport">数据导出</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="停放区编码"
              prop="areaNo"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="行政区"
              prop="districtName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="街道"
              prop="streetName"
            >
            </el-table-column>
            <el-table-column
              label="经度"
              prop="lng"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="纬度"
              prop="lat"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.lat}}

              </template>
            </el-table-column>
            <el-table-column
              label="停放阈值"
              prop="parkValue"
              show-overflow-tooltip>

            </el-table-column>
            <el-table-column
              label="状态"
              prop="areaStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.areaStatus == 0 ? '正常' : scope.row.areaStatus == 1 ? '规划中' : scope.row.areaStatus == 2 ? '停用' : scope.row.areaStatus == 3 ? '废除' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="140"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template slot-scope="scope">
                <i @click="pushAndGet(scope.row)" class="iconfont icon-chakan" ></i>
<!--                <i v-if="$store.state.btnMenuIds.indexOf(32)>-1" @click="pushAndGet(scope.row,'edit')" style="margin-left: 10px;" class="iconfont icon-bianji1"></i>-->
                <i v-if="$store.state.btnMenuIds.indexOf(324)>-1" @click="pushAndGet(scope.row,'edit')" style="margin-left: 10px;" class="iconfont icon-bianji1"></i>
                <i v-if="$store.state.btnMenuIds.indexOf(324)>-1" @click="handleDelete(scope.row)" style="margin-left: 10px;" class="iconfont icon-icon_feichu"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationWrap" >
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
    <router-view :checkInfo="checkInfo" @searchRowsInfo="searchRowsInfo"></router-view>
  </div>
</template>

<script>

  export default {
    props: [],
    data(){
      return {
        fileList3: [],
        options: [
          {
            value: '0',
            label: '停放区'
          }, {
            value: '1',
            label: '禁停区'
          }, {
            value: '2',
            label: '严管区域'
          }, {
            value: '3',
            label: '临时严管区域'
          }, {
            value: '4',
            label: '精细化试点管理区域'
          }, {
            value: '5',
            label: '总量控制区域'
          }],
        streetData: [],
        rows: [],
        pageSize: 10,
        count: 0,
        value6: "",
        currentPage: 1,
        tableHeight: 400,
        checkInfo: {},
        searchInfo: {
          street: "",
          district: this.$store.state.userInfo.regionId,
          areaAttribute:0,
          areaNo: "",
          beginTime: "",
          endTime: "",
          page: 1,
          rows: 10,
        },
        btnLoading:false
      }
    },
    components: {},
    created(){
      this.searchRowsInfo()
      setTimeout(()=>{
        if(this.$store.state.userInfo.regionId){this.changeDistrict(this.searchInfo.district)}
      },500)
    },
    mounted(){
      this.$nextTick(() => {
        //表格高度
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 160
      })
    },

    methods: {
      dataExport(){
        this.btnLoading = true
        this.axios.post(process.env.API_HOST + `area/downloadGovAreaData`,{},{responseType:'blob'})
          .then(response => {
            const result = response.data
            this.btnLoading = false
            if(result){
              this.downloadHandler(result,'停放区数据' + (new Date()).getTime() + '.xlsx')
            }
          })
      },
      downloadHandler(data, fileName, type) {
        // 匹配任意文件类型：type : "application/octet-stream"
        let blob = new Blob([data]);
        // 获取heads中的filename文件名
        let downloadElement = document.createElement('a');
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后文件名
        downloadElement.download = fileName;
        document.body.appendChild(downloadElement);
        // 点击下载
        downloadElement.click();
        // 下载完成移除元素
        document.body.removeChild(downloadElement);
        // 释放掉blob对象
        window.URL.revokeObjectURL(href);
      },
      handleFileChange(file, fileList) {
        let param = new FormData();
        param.append('uploadFile',file.raw);
        this.axios({
          method: 'post',
          url: process.env.API_HOST + `area/importAreaData`,
          timeout: 20000,
          headers:{"content-type":"multipart/form-data"},
          data: param
        }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.searchRowsInfo()
          } else {
            this.$message({
              type: 'error',
              message: '上传失败!'
            });
          }
        })
      },
      pushAndGet(row,key){
        this.checkInfo={...row,edit:key}
        this.$router.push("/parking/set")
      },
      handleDelete(row){
        this.$confirm('确认废除编码为 “' + row.areaNo + '” 停放区 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/area/deleteGovArea`,{id: row.id})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.searchRowsInfo()
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
              }
            })

          //删除当前
        }).catch(() => {

        });
      },
      //获取街道
      changeDistrict(district){
        this.searchRowsInfo(true)
        if(!district){
          this.searchInfo.street=""
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion',{parentId:district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })
      },
      //排序
      sortChange(a) {
        if (a.column) {
          if (a.column.label == "电子标签") {
            this.searchInfo.asc = !this.searchInfo.asc
            this.searchInfo.sortType = "labelNo"
            this.searchRowsInfo()
          } else if (a.column.label == "车辆编号") {
            this.searchInfo.asc = !this.searchInfo.asc
            this.searchInfo.sortType = "vehicleNo"
            this.searchRowsInfo()
          } else {
            this.searchInfo.sortType = a.prop
            this.searchRowsInfo()
          }
        } else {
          this.searchInfo.asc = "true", this.searchInfo.sortType = ""
        }
      },

      //获取所有信息
      searchRowsInfo(key){
        if(key){
          this.searchInfo.page = 1;
        }
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }
        this.axios.post(process.env.API_HOST + `/area/selectGovAreaGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()

      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()
</style>
